<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title02-图片切换</title>
	<script src="jquery-3.4.1.min.js"></script>
<style type="text/css">

	img{
		width: 200px;
		height: 200px;

	}


</style>
</head>
<body>
	
	<img src="./images/banner1.jpg"  id="flower">
	<br>
	<button id="prev">上一张</button>
	<button id="next">下一张</button>


<script type="text/javascript">
/*
	function $(id){
		return typeof id=== 'string'?document.getElementById(id):null;
	}
*/

	//1.获取事件源，找需要的标签
	var flower=document.getElementById('flower')
	var prevBtn=document.getElementById('prev')
	var nextBtn=document.getElementById('next')
	var minIndex=1,maxIndex=4;currentIndex=minIndex
	var i=2

//监听按钮的点击
	nextBtn.onclick=function(){
		// currentIndex++;
		i++;
		flower.setAttribute("src",'./images/banner${i}.jpg');
	},
	prevBtn.onclick=function(){
			i--;
			flower.setAttribute("src",'./images/banner${currentIndex}.jpg');
		}










</script>


</body>
</html>